import "package:craze/common/index.dart";
import "package:flutter/material.dart";
import "package:flutter_screenutil/flutter_screenutil.dart";
import "package:go_router/go_router.dart";
import "package:google_fonts/google_fonts.dart";
import 'package:craze/common/widgets/bullet_point_text.dart';
import 'package:easy_image_viewer/easy_image_viewer.dart';

class KnowledgeDetailOneView extends StatefulWidget {
  const KnowledgeDetailOneView({super.key});

  @override
  State<KnowledgeDetailOneView> createState() => _KnowledgeDetailOneViewState();
}

class _KnowledgeDetailOneViewState extends State<KnowledgeDetailOneView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 1.sh,
        width: 1.sw,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(MyImages.commonBg),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          bottom: false,
          child: Column(
            children: [
              // 顶部标题栏
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20.w),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () {
                        GoRouter.of(context).pop();
                      },
                      child: Icon(
                        MyIcons.iconBack,
                        color: Colors.white,
                        size: 24.sp,
                      ),
                    ),
                    Expanded(
                      child: Text(
                        'Knowledge',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 22.sp,
                          fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                          fontWeight: FontWeight.w400,
                          height: 1.36,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              // 使用Expanded让SingleChildScrollView占据剩余空间
              Expanded(
                child: SingleChildScrollView(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20.w),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(height: 28.h),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'The basics of diving？',
                            style: TextStyle(
                              color: Colors.white.withAlpha(230),
                              fontSize: 22.sp,
                              fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                              fontWeight: FontWeight.w400,
                              height: 1,
                            ),
                          ),
                        ),
                        SizedBox(height: 28.h),
                        Row(
                          children: [
                            _buildNumber("1"),
                            SizedBox(width: 10.w),
                            Text(
                              'Increased water pressure:',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontFamily:
                                    GoogleFonts.mochiyPopOne().fontFamily,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 20.h),
                        Padding(
                          padding: EdgeInsets.only(left: 32.w),
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'When diving, the water pressure increases with each depth you go.',
                              ),
                              SizedBox(height: 18.h),
                              BulletPointText(
                                text:
                                    'For every 10 meters you dive, the pressure increases by 1 atmosphere. For example, at a depth of 30 meters, the pressure is 4 atmospheres.',
                              ),
                              SizedBox(height: 18.h),
                              BulletPointText(
                                text:
                                    'The increased pressure affects the body, particularly air cavities (such as ears, sinuses, and lungs), diving equipment, and buoyancy.',
                              ),
                              SizedBox(height: 18.h),
                            ],
                          ),
                        ),
                        AspectRatio(
                          aspectRatio: 374 / 190,
                          child: GestureDetector(
                            onTap: () {
                              final imageProvider = AssetImage(
                                MyImages.knowledge1,
                              );
                              showImageViewer(
                                context,
                                imageProvider,
                                swipeDismissible: true,
                                doubleTapZoomable: true,
                              );
                            },
                            child: Image.asset(
                              MyImages.knowledge1,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ),
                        SizedBox(height: 28.h),
                        Row(
                          children: [
                            _buildNumber("2"),
                            SizedBox(width: 10.w),
                            Text(
                              'Ear pressure balance:',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontFamily:
                                    GoogleFonts.mochiyPopOne().fontFamily,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 20.h),
                        Container(
                          padding: EdgeInsets.only(left: 32.w),
                          width: 1.sw - 40.w,
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'When diving, the ears may feel the increased pressure causing discomfort or pain. This may require equalization techniques such as blowing gently through the pinched nose (Valsalva maneuver).',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 28.h),
                        Row(
                          children: [
                            _buildNumber("3"),
                            SizedBox(width: 10.w),
                            Text(
                              'Lung reactions:',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontFamily:
                                    GoogleFonts.mochiyPopOne().fontFamily,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 20.h),
                        Container(
                          padding: EdgeInsets.only(left: 32.w),
                          width: 1.sw - 40.w,
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'Never hold your breath when diving, because as you ascend, as the water pressure decreases, if the air in your lungs expands, it can cause pulmonary barotrauma, leading to serious consequences.',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 32.h),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'Buoyancy and neutral buoyancy',
                            style: TextStyle(
                              color: Colors.white.withAlpha(230),
                              fontSize: 22.sp,
                              fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                              fontWeight: FontWeight.w400,
                              height: 1.5,
                            ),
                          ),
                        ),
                        SizedBox(height: 28.h),
                        Row(
                          children: [
                            _buildNumber("1"),
                            SizedBox(width: 10.w),
                            Text(
                              'Three states of buoyancy:',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontFamily:
                                    GoogleFonts.mochiyPopOne().fontFamily,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 20.h),
                        Container(
                          padding: EdgeInsets.only(left: 32.w),
                          width: 1.sw - 40.w,
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'Positive buoyancy: A person floats in water (such as needed when resting on the surface of the water).',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 20.h),
                        Container(
                          padding: EdgeInsets.only(left: 32.w),
                          width: 1.sw - 40.w,
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'Negative buoyancy: A person sinks in water (suitable for diving).',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 20.h),
                        Container(
                          padding: EdgeInsets.only(left: 32.w),
                          width: 1.sw - 40.w,
                          child: Column(
                            children: [
                              BulletPointText(
                                text:
                                    'Neutral buoyancy: The person remains suspended (this is the most ideal state in diving, and can float and observe easily).',
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 28.h),
                        AspectRatio(
                          aspectRatio: 374 / 190,
                          child: GestureDetector(
                            onTap: () {
                              final imageProvider = AssetImage(
                                MyImages.knowledge2,
                              );
                              showImageViewer(
                                context,
                                imageProvider,
                                swipeDismissible: true,
                                doubleTapZoomable: true,
                              );
                            },
                            child: Image.asset(
                              MyImages.knowledge2,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ),
                        SizedBox(height: 100.h),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNumber(String number) {
    return SizedBox(
      width: 39.01.w,
      height: 39.35.w,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            left: 12.w,
            top: 2.h,
            child: Container(
              transform:
                  Matrix4.identity()
                    ..translate(0.0, 0.0)
                    ..rotateZ(-0.17),
              width: 24.w,
              height: 24.w,
              decoration: ShapeDecoration(
                color: const Color(0xFF003068),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            ),
          ),
          Positioned(
            left: 0.36.w,
            top: 7.82.h,
            child: Container(
              transform:
                  Matrix4.identity()
                    ..translate(0.0, 0.0)
                    ..rotateZ(-0.17),
              width: 32.w,
              height: 32.w,
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment(0.50, 0.00),
                  end: Alignment(0.50, 0.86),
                  colors: [const Color(0xFF0076FF), const Color(0xFF045EC6)],
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6),
                ),
              ),
            ),
          ),
          Positioned(
            left: 10.21.w,
            top: 10.79.h,
            child: Transform.rotate(
              angle: -0.17,
              child: Text(
                number,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.sp,
                  fontFamily: GoogleFonts.mochiyPopOne().fontFamily,
                  fontWeight: FontWeight.w400,
                  height: 1,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
